<template>
  <div class="v-echarts">
    <chart :options="option"></chart>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'v-echarts',
    props: {
      // echarts名称
      title: {
        type: String
      },
      // echarts头部
      legendData: {
        type: Array
      },
      // 横坐标数据
      xAxisData: {
        type: Array
      },
      // echarts图数据
      seriesData: {
        type: Array
      },
      echartsType: {
        type: String,
        default: 'line'
      }
    },
    watch: {
      echartsType (val) {
        this.option.series.forEach((item, index) => {
          item.type = val
          this.option.series.splice(index, 1, item)
        })
      },
      legendData (val) {
        this.option.legend.data = val
      },
      xAxisData (val) {
        this.option.xAxis[0].data = val
      },
      seriesData (val) {
        this.option.series = []
        val.forEach(item => {
          item.type = this.echartsType
          this.option.series.push(item)
        })
      }
    },
    data () {
      return {
        option: {
          title: {
            text: '' // echarts名称
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [], // echarts头部
            type: 'scroll'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: [] // 横坐标数据
            }
          ],
          yAxis: {
            type: 'value'
          },
          series: [] // echarts图数据
        }

      }
    },
    created () {
      this.option.legend.data = this.legendData
      this.option.xAxis[0].data = this.xAxisData
      this.option.title.text = this.title
      this.seriesData.forEach(item => {
        item.type = this.echartsType
        this.option.series.push(item)
      })
    }
  }
</script>
